<template>
    <view class="fans_box">
        <view class="top"></view>
        <view class="fans_box">
            <view class="single_fans_info" v-for="(item,index) in fansDatas" :key="item.userId">
                <view class="ava_box" @click="goOthersHomepage(item.userId)">
                    <image :src="item.userHeaderImage" mode="widthFix"></image>
                </view>
                <view class="info_box" @click="goOthersHomepage(item.userId)">
                    <view class="fans_name">{{item.userNickname}}
                        <image :src="sexIconSrc[item.userSex]" mode="widthFix"></image>
                    </view>
                    <view class="fans_desc">{{item.userDescribe}}</view>
                </view>
                <view class="interest" :class="{active:item.isActive||item.userInfo==='关注'}" @click="changeState(index,item.userId)">{{item.userInfo}}</view>
            </view>

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                sexIconSrc: {
                    "男": "/static/icon/img_icon19.png@2x.png",
                    "女": "/static/icon/img_icon20.png@2x.png"
                },
                fansDatas: [],
                myId: ""
            };
        },
        methods: {
            //去他人主页
            goOthersHomepage(id) {
                uni.navigateTo({
                    url: '/components/me/othershomepage?userId=' + id
                });
            },
            //请求粉丝数据
            getPersonData() {
                //获取token
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/myfans', {
                    "pageNo": 1,
                    "pageTol": 5
                }, 'GET', {
                    'Authorization': token,
                }).then(res => {
                    console.log(res.data)
                    this.fansDatas = res.data
                });
            },
            //修改关注与取消关注状态
            changeState(index, followId) {
                //修改关注状态
                if (this.fansDatas[index].userInfo === "取消关注") {
                    this.fansDatas[index].isActive = true
                    this.fansDatas[index].userInfo = "关注"
                } else if (this.fansDatas[index].userInfo === "关注") {
                    this.fansDatas[index].isActive = false
                    this.fansDatas[index].userInfo = "取消关注"
                }

                // 获取token
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/followAndCancelAttention', {
                    "fansId": this.myId,
                    "followId": followId
                }, 'POST', {
                    'Authorization': token,
                }).then(res => {
                    console.log(res)
                });
            }

        },
        mounted(){
            this.getPersonData()
        },
        onLoad(options){
            this.myId=options.myId
            // console.log(options)
        }
    }
</script>

<style lang="scss" scoped>
    $hign:100vh;

    .fans_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .fans_box {
            width: 750rpx;

            .single_fans_info {
                width: 750rpx;
                height: 130rpx;
                background-color: #ffffff;
                border-bottom: 1rpx solid #e5e5e5;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                padding: 15rpx 20rpx;

                .ava_box {
                    width: 88rpx;
                    height: 88rpx;
                    border: solid 1rpx #e5e5e5;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 15rpx;

                    image {
                        width: 88rpx;
                    }
                }

                .info_box {
                    width: 500rpx;
                    height: 80rpx;
                    box-sizing: border-box;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-content: center;

                    .fans_name {
                        width: 100%;
                        height: 31rpx;
                        font-family: PingFangSC-Regular;
                        font-size: 32rpx;
                        line-height: 31rpx;
                        color: #000000;
                        margin-bottom: 10rpx;

                        image {
                            margin-left: 10rpx;
                            height: 31rpx;
                            width: 31rpx;
                        }
                    }

                    .fans_desc {
                        width: 100%;
                        height: 24rpx;
                        font-family: PingFangSC-Light;
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #999999;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .interest {
                    // width: 100rpx;
                    height: 36rpx;
                    background-color: #dcdcdc;
                    border-radius: 5rpx;
                    font-family: PingFangSC-Regular;
                    font-size: 20rpx;
                    line-height: 36rpx;
                    color: #ffffff;
                    text-align: center;
                    box-sizing: border-box;
                    padding: 0 5rpx;

                }
            }
        }
    }

    .active {
        background-color: #ff6262 !important;
        margin-left: 24rpx;
    }
</style>
